<div id="editor-styles">
<style>
#editor-styles {max-width:600px;}
#editor-styles .fa{display:none;}
#editor-styles #left-panel{list-style: none; text-align: left;  color: #FFF;height: 45px !important;background: #ddd;}
#editor-styles #left-panel > li{display:inline-block;}
#editor-styles #left-panel > li.active, #editor-styles #left-panel > li > a:hover { background: #aaa; text-decoration: none;}
#editor-styles #left-panel > li > a {display: block;line-height: 45px;color: #333;text-decoration: none;padding:0 15px;font-size: 16px;border-bottom: 1px solid rgba(255,255,255,0.06);}
#editor-styles #left-panel > li.active a{color:#FFF;}
#editor-styles .tab-pane.active{display:block;}

#editor-styles #image-tabs {height:32px !important;width: 100%;background-color: rgba(76, 67, 66,0.2);background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);}
#editor-styles #image-tabs > li {
    list-style: none;
    display: inline-block;
    text-align: center;line-height:32px;
    width: auto;
}
#editor-styles #image-tabs > li a,#style-categories > li > a{color:#3a3332}
#editor-styles #image-tabs > li.active{background:#FFF;}

#editor-styles .tab-content{position:relative;}
#editor-styles .tab-content > .tab-pane {display: none;visibility: hidden;}
#editor-styles .tab-content > .active {display: block;visibility: visible;}
#editor-styles .col-md-4{width:100%;float: none;}
#editor-styles .col-sm-4{width:33.33%;float: left;}
#editor-styles .appmsg{padding:10px 5px;border:0 none;border-bottom:1px solid #ddd;text-align:center;}

#editor-styles input[type=text] {color: #333;background-color: transparent;border: 1px solid #eee;padding: 0 10px;}

#style-categories {padding:0 0;margin: 0;text-align: center;}
#style-categories .active{color:red;}
#style-categories > li {list-style: none;display:inline-block;padding: 0 6px;}
#style-categories > li > a:hover, #style-categories > li > a:focus{text-decoration: none;background-color: #ddd;display: block;}
#style-categories ul.dropdown-menu li {list-style: none;display:block;padding: 0;}
#style_search_list  ul li, #style-overflow-list ul li {cursor: pointer;width:100%;padding: 5px 5px;display: block;border-bottom: 1px solid #ddd;}
#style-overflow-list ul li:hover {background: #FFF;}

#editor-styles-content .col-sm-12,#system-template-list .col-md-6,#system-img-list .col-sm-4{cursor: pointer;width:100%;padding:15px 5px;border-bottom: 1px solid #ddd;}
#editor-styles-content .pagelink{clear: both;padding:5px 5px;font-size: 12px;background-color: rgba(245, 245, 245,0.8);border-bottom:1px solid #d4d4d4 !important}
#editor-styles-content .ui-page-default,#editor-styles-content .ui-page-active{padding:1px 5px;}

#editor-styles #images-list .appmsg {    height: 135px;}
#editor-styles #images-list img{cursor:pointer;max-height:95px;width:auto;}
#editor-styles #images-list .btn{    height: 25px;padding: 0 2px;line-height: 25px;}
#editor-styles .image-filter{padding:5px;}

#system-template-list img.template-cover{border: 1px solid #eee;}
#system-template-list .tools{display:none;}

#system-img-list .appmsg{border:0 none;}#system-img-list img{max-width:100%;}
#system-img-list .cover{text-align: center;}

#editor-styles ul {margin:0 0;}
#editor-styles * {font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size: 14px;}
#editor-styles * {max-width: 100%!important;margin:0;padding:0;font-style:normal;box-sizing: border-box!important;-webkit-box-sizing: border-box!important;word-wrap: break-word!important;}
#editor-styles table{margin-bottom:10px;border-collapse:collapse;display:table;width:100%!important}
#editor-styles td,th{word-wrap:break-word;word-break:break-all;padding:5px 10px;border:1px solid #DDD}
#editor-styles caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center}
#editor-styles th{border-top:2px solid #BBB;background:#f7f7f7}
#editor-styles .ue-table-interlace-color-single{background-color:#fcfcfc}
#editor-styles .ue-table-interlace-color-double{background-color:#f7faff}
#editor-styles td p{margin:0;padding:0;width:auto;height:auto;}

#editor-styles p{clear:both;margin:0 0;font-size:12px;min-height:1em;white-space: normal;}
#editor-styles img{*zoom:1;max-width:100%;*max-width:96%;height:auto !important;}
#editor-styles iframe{width:301px !important;border:0;background-color:none;}
#editor-styles iframe,#editor-styles .video_iframe {background-color: #000000;width: 100% !important;position: static;}
#editor-styles blockquote{margin:0;padding-left:10px;border-left:3px solid #DBDBDB;}
.filter {cursor: pointer;display: inline-block;}
#editor-styles .pagelink{margin: 10px 0;}
#editor-styles .pagelink span,#editor-styles .pagelink a{padding:0 3px;}
.dropdown { position: relative;}
.dropdown-menu {position: absolute;top: 100%;left: 0;z-index: 1000;display: none;float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;list-style: none;font-size: 14px;text-align: left;background-color: #ffffff;border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15);  border-radius: 0px;  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  background-clip: padding-box;}
.open > .dropdown-menu {  display: block;}
.dropdown-menu > li > a { display: block;padding: 5px 15px !important;clear: both;font-weight: normal;line-height: 1.42857143;color: #333333;white-space: nowrap;}
.dropdown-menu > li > a:hover,.dropdown-menu > li > a.active,.dropdown-menu > li > a:focus { text-decoration: none;  color: #ffffff;  background-color: #2fa4e7;}
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus { color: #ffffff; text-decoration: none;outline: 0;background-color: #2fa4e7;}
</style>
	<ul id="left-panel" class="editor-menus">
		<li class="active"><a href="#favor-styles">样式</a></li>
		
		<li><a href="#online-onekey" data-toggle="tab" data-url="//www.135plat.com/html_parsers/lists?{{http_build_query($_REQUEST)}} #html-parsers-list">一键排版</a></li>

		{{$appinfo['Appkey']['custom_menu']}}
		<li style="float:right;"><a href="javascript:void(0)" style="font-size:13px;" id="refresh-styles">刷新</a></li>
	</ul>
	<div class="tab-content" id="editor-styles-content" style="display:block;width:100%;overflow-y: auto;overflow-x: overlay;background:#FFF;">
		<div id="online-styles"  class="tab-pane" style="overflow-x: hidden;"></div>
		
		<div id="custom-tab1"  class="tab-pane"></div>
		<div id="custom-tab2"  class="tab-pane"></div>
		<div id="custom-tab3"  class="tab-pane"></div>
		<div id="online-template"  class="tab-pane"></div>
		<div id="online-onekey"  class="tab-pane" style="padding:2px;"></div>
			<div id="favor-styles"  class="tab-pane active">
				 <?php $appinfo['Appkey']['show_icon'] = 0; ?>
				 <div style="background-color:rgba(234,234,234,0.9);height:40px;line-height: 40px;text-align:center;">
			          	{{template editor_styles/style_categories}}
				  </div>
				  <div  id="copyright" style="line-height:32px;">
			          	<div style="height:32px;line-height:32px;padding:0 10px;color: #555; background-color:#f8f8f8;">
			          		<p>
			          			<input type="text" placeholder="输入关键字搜索样式" style="height:30px;width:150px;" id="txtStyleSearch"> 
			          		</p>
			          	</div>
			          	<div id="styleSearchResult" style="position:absolute;display:none;top:64px;left:0px;width:384px;z-index: 100;border: 5px solid rgba(80,80,80,0.2);background:#FFF;">
			          		<p style="padding:5px;border-bottom: 3px solid #ddd;">搜索结果 <span class="btn" style="float:right;font-size: 24px;color: #000000;font-weight: bold;text-shadow: 0 1px 0 #ffffff;" onclick="$('#styleSearchResult').hide();"> × </span> </p>
			          		<div id="styleSearchResultList" style="width:100%;overflow-y:auto;">
			          			<img src="//static.135editor.com/img/ajax/circle_ball.gif">
			          		</div>
			          	</div>
				 </div>
				  <div id="style-overflow-list" style="overflow-y:auto;overflow-x:hidden;height:300px;background-color: #fcfcfc;">
				        <div id="load-more-style" class="alert alert-warning m0"></div>
				</div>
			</div>
	</div> 
</div> 
<section id="color-plan" style="width:110px;position:fixed;top:105px;right:-5px;height:320px;text-align: center;display:none;z-index: 1000;">
	<div id="color-choosen" style="position:absolute;right:0px;padding: 10px 0px !important;width:105px;padding:5px 0;background:rgba(58,51,50,0.8);">		
			  	<div style="margin:5px 5px;color:#FFF;line-height:32px;text-align: center;position:relative;" >
		        	<input id="custom-color-text" class="colorPicker form-control" style="font-size:12px;width:100%;color:#FFF;padding:4px;height:24px;line-height:16px" id="custom-color" value="#EF7060" />
		        </div>
		        
		        <div style="margin:0 0;color:#dad9d8;line-height:18px;text-align: center;"><label style="cursor:pointer;margin-bottom:0px;font-size:12px;"><input style="margin-top:8px;" type="checkbox" id="replace-color-all" value="1"> 全文换色</label></div>

			 	<hr style="margin:2px 20px;border-color:#ddd;"/>
			    <ul class="clearfix" style="list-style:none;padding:0 5px;margin:0 0;">
		            <li class="color-switch" style="background-color: #ac1d10"></li>
		            <li class="color-switch" style="background-color: #d82821;"></li>
		            <li class="color-switch default-color" style="background-color: #ef7060;"></li>
		            <li class="color-switch" style="background-color: #fde2d8;"></li>
		            
		            <li class="color-switch" style="background-color: #d32a63;"></li>
		            <li class="color-switch" style="background-color: #eb6794;"></li>
		            <li class="color-switch" style="background-color: #f5bdd1;"></li>            
		            <li class="color-switch" style="background-color: #ffebf0;"></li>
		            
		            <li class="color-switch" style="clear:left;background-color: #e2561b;"></li>
		            <li class="color-switch" style="background-color: #ff8124;"></li>
		            <li class="color-switch" style="background-color: #fcb42b;"></li>
		            <li class="color-switch" style="background-color: #feecaf;"></li>
		            
		            <li class="color-switch" style="clear:left;background-color: #0c8918;"></li>
		            <li class="color-switch" style="background-color: #80b135;"></li>
		            <li class="color-switch" style="background-color:#c2c92a;"></li>
		            <li class="color-switch" style="background-color:#e5f3d0;"></li>
		            
		            <!-- <li class="color-switch" style="clear:left;background-color: #1f877a;"></li>
		            <li class="color-switch" style="background-color: #27abc1;"></li>
		            <li class="color-switch" style="background-color: #5acfe1;"></li>
		            <li class="color-switch" style="background-color: #b6f2ea;"></li> -->
		            
		            <li class="color-switch" style="clear:left;background-color:#374aae;"></li>
		            <li class="color-switch" style="background-color:#1e9be8;"></li>
		            <li class="color-switch" style="background-color:#59c3f9;"></li>
		            <li class="color-switch" style="background-color:#b6e4fd;"></li>
		
		            <li class="color-switch" style="clear:left;background-color:#5b39b4;"></li>
		            <li class="color-switch" style="background-color: #4c6ff3;"></li>
		            <li class="color-switch" style="background-color:#91a8fc;"></li>
		            <li class="color-switch" style="background-color:#d0dafe;"></li>
		            
		            <!-- 紫色 -->
		            <li class="color-switch" style="clear:left;background-color:#8d4bbb;"></li>
		            <li class="color-switch" style="background-color: rgb(166, 91, 203);"></li>
		            <li class="color-switch" style="background-color:#cca4e3;"></li>
		            <li class="color-switch" style="background-color: rgb(190, 119, 99);"></li>
		            
		            <li class="color-switch" data-color="#efefef" style="clear:left;background-color:#3c2822;"></li>
		            <li class="color-switch" style="background-color:#6b4d40;"></li>
		            <li class="color-switch" style="background-color:#9f887f;"></li>
		            <li class="color-switch" style="background-color:#d7ccc8;"></li>
		            
		        	<li class="color-switch" style="background-color: #212122;"></li>
		        	<li class="color-switch" style="background-color: #757576;"></li>
		        	<li class="color-switch" style="background-color: #c6c6c7"></li>
		        	<li class="color-switch" style="background-color: #f5f5f4"></li>
		        	
		        </ul>
		        {{if $current_user_id}}
		        {{/if}}
	
	</div>
	<section style="clear:both;width:0px;height:0px;"></section>      
</section>
